<template>
  <div class="home">
    <TopHeader></TopHeader>
    <router-view></router-view>
    <div class="mark" v-if="showBigImg.tag==true">
      <BigImg class="child" :img="showBigImg.imgUrl" />
    </div>
    <BottomFooter></BottomFooter>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader.vue'
import BottomFooter from '@/components/BottomFooter.vue'
import BigImg from '../components/BigImg.vue'
import { mapState } from 'vuex'

export default {
  name: 'Hotel',
  components: {
    TopHeader,
    BottomFooter,
    BigImg
  },
  computed: {
    ...mapState({
      showBigImg: state => {
        return state.hotel.showBigImg
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.mark {
  // background: rgb(100, 100, 100);
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  // z-index: 99;
  .child {
    position: fixed;
    width: 800px;
    height: 560px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
}
</style>
